<style media="screen">
  .tmp-preview-title{
    margin:0 24px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
  }
  .tmp-preview-name{
    margin: 30px auto 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  .tmp-preview-wrap{
    width:810px;
    margin:0 auto;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(214,214,214,.75);
  }
  .tmp-preview-wrap .textLeft{
    float:left;
    text-align: left;
  }
  .tmp-preview-wrap .textCenter{
    float: left;
    text-align: center;
  }
  .tmp-preview-wrap .textRight{
    float: right;
    text-align: right;
  }
  .tmp-preview-wrap .w50{
    width: 50%;
  }
  .tmp-preview-wrap .w33{
    width: 33%;
  }
  .tmp-preview-wrap .w00{
    width: 0%;
  }
  .tmp-preview-wrap .w100{
    width: 100%;
  }
  .tmp-preview-wrap .preview-Item{
    overflow: hidden;
  }
  .tmp-preview-wrap .preview-Item div{
    min-height: 30px;
    line-height: 22px;
    padding: 4px 0;
  }
  .tmp-preview-wrap .preview-Item .font12{
    font-size: 12px;
  }
  .tmp-preview-wrap .preview-Item .font14{
    font-size: 14px;
  }
  .tmp-preview-wrap .preview-Item .font16{
    font-size: 16px;
  }
  .tmp-preview-wrap .preview-Item .font18{
    font-size: 18px;
  }
  .tmp-preview-wrap .tbhead th{
    border:1px solid #333;
    text-align: center;
    line-height: 24px!important;
    padding: 8px 0;
    height: 32px;
    font-size: 12px;
  }
  .tmp-preview-wrap .tbhead td{
    border:1px solid #333;
    text-align: center;
    line-height: 24px!important;
    padding: 8px 0;
    height: 32px;
    font-size: 12px;
  }
  .tmp-tail-line{
    margin:50px 24px 20px;
    border-bottom: 1px solid #e5e5e5;
  }

</style>


<section id="template-preview">
  <div class="tmp-preview-title ptb-10 clearfix">
    <h3 class="font-16 pull-left font-nm">账单打印模版</h3>
  </div>

  <section>
    <h3 class="tmp-preview-name">{{moduleName}}</h3>
    <!-- 模版 -->
    <section>
      <div class="tmp-preview-wrap" :style="pageStyle">
        <!-- 头部 -->
        <div>
            <div v-for="(item,index) in headPerData" class="preview-Item">
              <div :class="{textLeft:item1.elePosition == 'TL' , textCenter:item1.elePosition == 'TC' , textRight:item1.elePosition == 'TR' ,
                   w50:item1.width == 'w50' , w33:item1.width == 'w33' , w00:item1.width == 'w00' , w100:item1.width == 'w100' ,
                   font12:item1.eleSize == '12', font14:item1.eleSize == '14' , font16:item1.eleSize == '16' , font18:item1.eleSize == '18'
                }"
                  v-for="(item1,index1) in item"
              >
                <span v-if="item1.eleType === 'sys' ">
                  <span>{{item1.eleDispName}}:</span>
                  <span>{{item1.eleVal}}</span>
                </span>
                <span v-if="item1.eleType === 'txt' ">
                  <span>{{item1.eleValue}}</span>
                </span>
                <span v-if="item1.eleType === 'ph' "></span>
              </div>
            </div>
        </div>

        <!-- 中部 -->
        <div>
          <div class="tbhead">
            <table cellpadding="0" cellspacing="0" width='100%' style="border-top:1px solid #333;">
              <tr>
                <th v-for="(item,index) in tbHead" v-if="item.eleShow == 'Y'">{{item.eleDispName ? item.eleDispName : item.eleName}}</th>
              </tr>
              <tr v-for="(item,index) in tbContent" >
                <td v-for="(item1,index1) in item" v-if="item1.eleShow == 'Y'">{{item1.value | formatUndefined}}</td>
              </tr>
            </table>

          </div>
        </div>

        <!-- 尾部 -->
        <div>
            <div v-for="(item,index) in footerPerData" class="preview-Item">
              <div :class="{textLeft:item1.elePosition == 'TL' , textCenter:item1.elePosition == 'TC' , textRight:item1.elePosition == 'TR' ,
                   w50:item1.width == 'w50' , w33:item1.width == 'w33' , w00:item1.width == 'w00' , w100:item1.width == 'w100' ,
                   font12:item1.eleSize == '12', font14:item1.eleSize == '14' , font16:item1.eleSize == '16' , font18:item1.eleSize == '18'
                }"
                  v-for="(item1,index1) in item"
              >
                <span v-if="item1.eleType === 'sys' ">
                  <span>{{item1.eleDispName}}:</span>
                  <span>{{item1.eleVal}}</span>
                </span>
                <span v-if="item1.eleType === 'txt' ">
                  <span>{{item1.eleValue}}</span>
                </span>
                <span v-if="item1.eleType === 'ph' "></span>
              </div>
            </div>
        </div>

        <!-- 水印图 -->
        <div class="watermark-preview-wrap" v-for="(item,index) in watermarkData">
          <img class="watermark-preview-image" :src="item.url" alt="水印图" :style="watermarkStyle[index]">
        </div>

      </div>
    </section>
  </section>

  <div class="tmp-tail-line"></div>
  <div style="marginLeft:24px;marginBottom:10px">
    <hl-button @on-click="editTemplate" v-if="quanxian.indexOf('c133') > -1">编辑模版</hl-button>
  </div>
</section>

<script src="modules/print_template/scripts/bill_tmp_details.js" charset="utf-8"></script>
